<template>
	<view class="prohibition">
		<view class="demo" :style="[{background},{color},{height},{paddingTop}]">
			<!-- 左侧返回按钮 -->
			<!-- 		<view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop -10}]">
				<uni-icons type="arrowleft" size="30" :color='color'></uni-icons>
			</view> -->
			<view class="left" @click="scanCode()" :style="[{color},{paddingTop}]">
				<uni-icons type="scan" size="24"></uni-icons>
				<text>扫一扫</text>
			</view>
			<!-- 中间标题文字 -->
			<view class="title">
				<!-- {{title}} -->首页
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				paddingTop: '40rpx',

			}
		},
		// props: ["title", "back"],
		props: {
			title: { // 标题文字(默认为空)
				type: String,
				default: '首页'
			},
			color: { // 标题和返回按钮颜色(默认白色)
				type: String,
				default: '#000'
			},
			//建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
			background: { // 背景颜色(不传值默认透明)
				type: String,
				default: 'transparent'
			},
			back: { // 是否显示返回按钮(不传值默认不显示)
				type: Boolean,
				default: false
			},
		},

		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.height = demo.height + "px"
			this.paddingTop = demo.top - 10 + "px"

		},
		methods: {
			// 左侧返回按钮调用
			onBack() {
				this.$emit("onBack")
			},
			scanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						if(res.path.split("?")[0] == 'pages/other/begin'){
							uni.navigateTo({
								url: "/pages/other/begin?tableId=" + res.path.split("=")[1]
							});
						}
						console.log(res.path.split("?")[0],res.path.split("?")[1])
						console.log(res.path.split("=")[1])
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
		}
	}
</script>
<style lang="less">
	.demo {
		position: relative; //注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值
		// position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		z-index: 100;
		padding-bottom: 10rpx;

		.left {
			float: left;
			position: absolute;
			top: 0;
			left: 0;
			color: #000;
			margin: auto;

			uni-icons {
				vertical-align: middle;
				margin-right: 10rpx;
			}
			text{
				vertical-align: middle;
			}
		}

		.title {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			// color: #FFFFFF;
			color: #000;
			font-size: 34rpx;
			font-weight: bold;
			position: relative;
			top: -10rpx;
		}
	}
</style>
